<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>JavaScript 表达式</title>
</head>

<body>
    <div id="app">
        <p>{{ number + 1 }}</p>
        <p>{{ ok ? 'YES' : 'NO' }}</p>
        <p>{{ message.split('').reverse().join('') }}</p>
        <div v-bind:id="'list-' + id"></div>
    </div>

    <script type="module">
        import Vue from '../vue.esm.browser.js'

        const app = new Vue({
            el: '#app',
            data: {
                number: 10,
                ok: true,
                message: 'Hello, Vue',
                id: 'container'
            }
        })
    </script>

    <style>
        #list-container {
            width: 200px;
            height: 100px;
            background-color: royalblue;
        }
    </style>
</body>

</html>